﻿<!--_meta 作为公共模版分离出去-->
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="Bookmark" href="favicon.ico">
    <link rel="Shortcut Icon" href="favicon.ico"/>
    <!--[if lt IE 9]>
    <script type="text/javascript" src="lib/html5.js"></script>
    <script type="text/javascript" src="lib/respond.min.js"></script>
    <![endif]-->
    <link rel="stylesheet" type="text/css" href="static/h-ui/css/H-ui.min.css"/>
    <link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/H-ui.admin.css"/>
    <link rel="stylesheet" type="text/css" href="lib/Hui-iconfont/1.0.8/iconfont.css"/>
    <link rel="stylesheet" type="text/css" href="static/h-ui.admin/skin/default/skin.css" id="skin"/>
    <link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/style.css"/>
    <!--[if IE 6]>
    <script type="text/javascript" src="http://lib.h-ui.net/DD_belatedPNG_0.0.8a-min.js"></script>
    <script>DD_belatedPNG.fix('*');</script>
    <![endif]-->
    <!--/meta 作为公共模版分离出去-->

    <title>权限管理 - 管理员管理</title>
</head>
<style>
    .ff{
        width:100%;
        height:100%;
        position: absolute;
        left: 0;
        top: 0;
        z-index:100;
        background-color: rgba(10,10,10,.4);
        display: none;
    }
    .ff form{
        width:540px;
        height:200px;
        background: #fff;
        margin:100px auto 0;
        padding:50px 20px 20px;
        border-radius: 6px;
    }
    .formControls{
        padding-right:50px;
    }
    .close{
        width:30px;
        height:30px;
        font-size:20px;
        line-height:30px;
        position: absolute;
        right: 5px;
        top: 5px;
        text-align: center;
    }
    .edit{
        display: none;
    }
</style>
<body>
<nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span> 管理员管理 <span
        class="c-gray en">&gt;</span> 权限管理 <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px"
                                              href="javascript:location.replace(location.href);" title="刷新"><i
        class="Hui-iconfont">&#xe68f;</i></a></nav>
<div class="Hui-article">
    <article class="cl pd-20">
        <!--<div class="text-c">-->
            <!--<form class="Huiform" method="post" action="" target="_self">-->
                <!--<input type="text" class="input-text" style="width:250px" placeholder="权限名称" id="" name="">-->
                <!--<button type="submit" class="btn btn-success"  name=""><i class="Hui-iconfont">&#xe665;</i> 搜权限节点-->
                <!--</button>-->
            <!--</form>-->
        <!--</div>-->
        <div class="cl pd-5 bg-1 bk-gray mt-20"><span class="l">
            <a href="javascript:;" onclick="permission_add()" class="btn btn-primary radius"><i class="Hui-iconfont">&#xe600;</i> 添加权限节点</a></span>
            <span class="r">共有数据：<strong id="totalCount">0</strong> 条</span></div>
        <table class="table table-border table-bordered table-bg" style="margin-top:20px;">
            <thead>
            <tr>
                <th scope="col" colspan="7">权限节点</th>
            </tr>
            <tr class="text-c">
                <th width="40">ID</th>
                <th width="200">权限名称</th>
                <th width="200">权限路径</th>
                <th width="100">操作</th>
            </tr>
            </thead>
            <tbody id="listContent">

            </tbody>
        </table>
        <div class="row cl">
            <div class="col-xs-4 col-sm-3 text-l" style="margin-top: 30px;height:30px;line-height: 30px;">
                当前：第 <span id="nowPage">1</span> 页 / 总：<span id="totalPages">1</span> 页
            </div>
            <div class="col-xs-8 col-sm-9 text-r" style="margin-top: 30px;">
                <input class="btn btn-default-outline radius" type="button" id="previous"
                       value="&nbsp;&nbsp;上一页&nbsp;&nbsp;">
                <input class="btn btn-primary radius" type="button" id="next" value="&nbsp;&nbsp;下一页&nbsp;&nbsp;">
            </div>
        </div>
    </article>
</div>
<article class="cl pd-20 ff">
    <form action="" method="post" class="form form-horizontal" id="form-admin-role-add" style="position:relative;">
        <div class="close">X</div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>权限名称：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" placeholder="权限名称" id="qx_name">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>权限路径：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" placeholder="权限路径" id="qx_url">
            </div>
        </div>
        <div class="row cl">
            <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
                <button type="button" class="btn btn-success radius add" id="permission_save" ><i class="icon-ok"></i> 确定添加</button>
                <button type="button" class="btn btn-success radius edit" id="permission_edit"><i class="icon-ok"></i> 确定修改</button>
            </div>
        </div>
    </form>
</article>

<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="lib/layer/2.4/layer.js"></script>
<script type="text/javascript" src="static/h-ui/js/H-ui.js"></script>
<script type="text/javascript" src="static/h-ui.admin/js/H-ui.admin.page.js"></script>

<!--/_footer /作为公共模版分离出去-->

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="lib/My97DatePicker/4.8/WdatePicker.js"></script>
<script type="text/javascript" src="lib/datatables/1.10.0/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="lib/laypage/1.2/laypage.js"></script>
<script src="lib/common.js"></script>
<script type="text/javascript">
    var dataList = [];
    $(function () {
        $.post(url+"/manager/permission/list", {pageSize: pageSize, pgeNum: pageNum}).success(function (res) {
            if (res) {
                totalCount = res.total;
                $("#totalPages").html(Math.ceil(totalCount / pageSize));
                $("#totalCount").html(totalCount);
                var str = "";
                var data = res.list;
                dataList = res.list;
                for (var i = 0; i < data.length; i++) {
                    str += showTable(data[i].id, data[i].name, data[i].url);
                    list.push(data[i]);
                }
                $("#listContent").html(str);
            } else {
                alert("获取数据失败");
            }
        }).error(function (err) {
            alert("获取数据失败");
        });
    });
    function showTable(id,name,url){
          return  '<tr class="text-c"><td>'+ id +'</td> <td>'+ name +'</td>' +
              ' <td>'+ url +'</td> <td><a title="编辑" href="javascript:;"onclick="permission_edit(this)" class="ml-5" style="text-decoration:none">' +
              '<i class="Hui-iconfont">&#xe6df;</i>修改路径</a> </td> </tr>';
    }
    //添加权限
    function permission_add(){
        $(".ff").fadeIn();
        $(".add").show();
        $(".edit").hide();
    }
    $("#permission_save").click(function(){
       var obj = {
           name:$("#qx_name").val(),
           url:$("#qx_url").val()
       }
       if(obj.name == "" || obj.url == ""){
           alert("权限名称和权限路径都不能为空");
       }else{
           $.post(url+"/manager/permission/add",{name:obj.name,url:obj.url}).success(function(res){
              if(res.status == 1){
                  alert("添加成功");
                  location.reload();
              }else{
                  alert("添加失败")
              }
           }).error(function(err){
              alert("添加错误");
           }).complete(function(){
               $(".ff").fadeOut();
           });
       }
    });
    //编辑权限
    var edit_id,edit_index;
    function permission_edit(that){
        $(".ff").fadeIn();
        $(".add").hide();
        $(".edit").show();
       edit_id = $(that).parents("tr").children("td").eq(0).html();
       for(var i = 0;i < list.length;i++){
           if(list[i].id == edit_id){
               edit_index = i;
               $("#qx_name").val(list[i].name);
               $("#qx_url").val(list[i].url);
           }
       }
    }
    $("#permission_edit").click(function(){
        var obj = {
            name:$("#qx_name").val(),
            url:$("#qx_url").val()
        }
        if(obj.name == "" || obj.url == ""){
            alert("权限名称和权限路径都不能为空");
        }else{
            $.post(url+"/manager/permission/update",{id:edit_id,name:obj.name,url:obj.url}).success(function(res){
                if(res.status == 1){
                    alert("修改成功");
                    var td = $("#listContent tr").eq(edit_index).children("td");
                    td.eq(1).html(obj.name);
                    td.eq(2).html(obj.url);
                }else{
                    alert("修改失败")
                }
            }).error(function(err){
                alert("修改错误");
            }).complete(function(){
                $(".ff").fadeOut();
            });
        }
    });

    //上一页
    $("#previous").click(function () {
        if (nowPage == 1) {
            alert("再往前就没有了");
        } else {
            nowPage--;
            var str = "";
            for (var s = (nowPage - 1) * pageSize; s < nowPage * pageSize; s++) {
                str += showTable(list[s].id, list[s].name, list[s].url);
            }
            $("#listContent").html(str);
            $("#nowPage").html(nowPage);
        }
    });
    //下一页
    $("#next").click(function () {
        var p = nowPage * pageSize;
        if (p >= totalCount) {
            alert("再往后就没有了");
        } else if (p < list.length) {
            nowPage++;
            var str = "";
            for (var s = (nowPage - 1) * pageSize; s < list.length; s++) {
                str += showTable(list[s].id, list[s].name, list[s].url);
            }
            $("#listContent").html(str);
            $("#nowPage").html(nowPage);
        } else {
            nowPage++;
            $.post(url+"/manager/permission/list", {pageSize: pageSize, pgeNum: nowPage}).success(function (res) {
                var str = "";
                var data = res.list;
                for (var i = 0; i < data.length; i++) {
                    str += showTable(data[i].id, data[i].name, data[i].url);
                    list.push(data[i]);
                }
                $("#listContent").html(str);
                $("#nowPage").html(nowPage);
            }).error(function () {
                alert("获取数据失败");
            });
        }
    });
</script>
<!--/请在上方写此页面业务相关的脚本-->
</body>
</html>